<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OBS Form Upload Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
        .container .row {
            margin-bottom: 10px;
        }
        
        h1 {
            margin-top: 50px;
            margin-bottom: 30px;
        }

        label {
            line-height: 38px;
        }
    </style>
</head>
<body>
    <form id="uploadForm" action="" method="post" enctype="multipart/form-data">
        <div class="container">
            <h1 class="title">OBS Form Upload Demo (Upload By Form)</h1>
            <div class="row">
                <div class="col-3">
                    <label>Object key</label>
                </div>
                <div class="col-4">
                    <!-- Object name, eg: 'demo1/test.jpg' will create a 'demo' directory on your bucket, and filename will be 'test.jpg' -->
                    <input class="form-control" type="text" name="key" value="test.jpg" />
                </div>
            </div>

            <div class="row">
                <div class="col-3">
                    <label>ACL</label>
                </div>
                <div class="col-4">
                    <!-- Object ACL authority, be sure same as your ObsClient.createPostSignatur params -->
                    <input class="form-control" type="text" name="x-obs-acl" value="public-read" />
                </div>
            </div>

            <div class="row">
                <div class="col-3">
                    <label>Content-Type</label>
                </div>
                <div class="col-4">
                    <!-- Obejct MIME type -->
                    <input class="form-control" type="text" name="content-type" value="text/plain" />
                </div>
            </div>

            <!-- policy in base64 code -->
            <input type="hidden" name="policy" value="" />
            <!-- Access key -->
            <input type="hidden" name="AccessKeyId" value=""/>
            <!-- Signature -->
            <input type="hidden" name="signature" value=""/>
            <!-- success action redirect -->
            <input type="hidden" name="success_action_redirect" value="http://localhost:3000/obs-form-upload/success.html"/>

            <!-- Be notice the file item must be placed in the end-->
            <div class="row">
                <div class="col-3">
                    <label>File</label>
                </div>
                <div class="col-4">
                    <input class="form-control" name="file" type="file" />
                </div>
            </div>

            <div class="row">
                <div class="col-3">
                </div>
                <div class="col-4">
                    <input class="btn btn-primary" name="submit" value="Upload" type="submit" />
                </div>
            </div>
        </div>
    </form>

    <!-- Dependence: axios [https://axios-http.com/], axios for http requst -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

    <!-- OBS upload module -->
    <script>
        // Get policy, signature etc.
        function getAuthorizationData() {
            return axios.get('/api-xxx')
                .then((res) => {
                    if (res.status < 300 && res.data?.code == 200) {
                        console.log('Authorization Data:', res.data.data)
                        return  res.data?.data || {}
                    }
                    else {
                        return Promise.reject(res)
                    }
                })
        }

        // Get upload form action url.
        function getUploadURL(bucketName, endpoint) {
            let url = endpoint
            url = url.replace(/(https?:\/\/)/g, '$1' + bucketName + '.')
            console.log('Action URL:', url)
            return url
        }

        ;(async () => {

            const ak = 'XXXXXXXXXXXXXXXXXXX' // Access key
            const bucketName = 'xxxx' // Bucket name
            const endpoint = 'https://xxxx' // Endpoint for your zone, check it on https://developer.huaweicloud.com/endpoint?OBS
            
            const authorizationData = await getAuthorizationData()

            const policyElement = document.getElementsByName('policy')[0]
            const AccessKeyIdElement = document.getElementsByName('AccessKeyId')[0]
            const signatureElement = document.getElementsByName('signature')[0]
            const formElement = document.getElementById('uploadForm')

            policyElement.value = authorizationData.policy
            AccessKeyIdElement.value = ak
            signatureElement.value = authorizationData.signature
            formElement.action = getUploadURL(bucketName, endpoint)

        })()
    </script>
</body>
</html>